/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section>
    <popup v-model="popupVis" position="right" height="100%" width="80%" class="content_box">
      <div class="header">{{title}}</div>
      <div class="main">
        <ul>
          <li :class="{ active: curType === '' }" @click="handlerItem()">
            <a href="javascript:void(0);">全部</a>
          </li>
          <li
            :class="{ active: curType === item.id }"
            @click="handlerItem(item.id)"
            v-for="(item, index) in data"
            :key="index"
          >
            <a href="javascript:void(0);">{{item.name}}</a>
          </li>
        </ul>
      </div>
      <div class="footer">
        <div class="btn">
          <a href="javascript:void(0);" class="reset" @click="reset()">重置</a>
        </div>
        <div class="btn">
          <a href="javascript:void(0);" class="sure" @click="submit()">确定</a>
        </div>
      </div>
    </popup>
  </section>
</template>

<script>
import { Popup } from "vux";
export default {
  props: {
    data: Array,
    type: [String, Number]
  },
  model: {
    prop: "type",
    event: "change"
  },
  data() {
    return {
      curType: this.type,
      title: "",
      popupVis: false
    };
  },
  watch: {
    type: function(data) {
      this.curType = data;
    }
  },
  mounted() {
    let p = JSON.parse(localStorage.getItem("selectedProject"));
    this.title = p.name;
  },
  methods: {
    handlerItem(data) {
      if (!data) {
        this.curType = "";
      } else {
        this.curType = data;
      }
    },
    reset() {
      this.curType = "";
    },
    submit() {
      let self = this;
      this.$emit("change", self.curType);
      this.popupVis = false;
    }
  },
  components: {
    Popup
  }
};
</script>

<style lang='less' scoped>
@import "../util/theme.less";

.content_box {
  background: @white;
}
.header {
  height: 46px;
  width: 100%;
  line-height: 46px;
  font-size: 16px;
  padding: 0 6px;
  border-bottom: 1px solid @border-base;
}

.main {
  width: 100%;
  height: calc(~"100% - 50px");
  padding-left: 10px;
  padding-top: 10px;
  ul {
    .be-full();
    li {
      display: inline-block;
      width: 32.333%;
      padding-right: 10px;
      margin-bottom: 10px;
      a {
        width: 100%;
        height: 35px;
        line-height: 35px;
        border-radius: 35px;
        display: block;
        background: @border-base;
        text-align: center;
      }
    }
    .active {
      a {
        color: @red;
        background: @red-bg;
      }
    }
  }
}

.footer {
  height: 50px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: @white;
  .mix-flex-center();
  padding-left: 10px;
  .btn {
    flex: 1;
    padding-right: 10px;
    a {
      display: block;
      width: 100%;
      height: 40px;
      background: @red;
      .mix-flex-center();
      color: @white;
      font-size: 16px;
      border-radius: 4px;
    }
    .reset {
      background: @red-bg;
      color: @red;
    }
  }
}
</style>
